<style lang="scss">
.sp-footer {
}

.my-foot {
  padding: 40px;
  width: 100%;
  background-color: #4f4f4f;
  text-align: center;
  color: #a9a9a9;
}
</style>

<template>
  <div class="sp-footer">
    <div style="background-color: #eeeeee">
      <div style="display: flex; justify-content: space-around; font-size: 18px">
        <div class="blueColor" style="padding: 20px 80px">正品保障</div>
        <hr />
        <div class="blueColor" style="padding: 20px 80px">七天包退</div>
        <hr />
        <div class="blueColor" style="padding: 20px 80px">好评如潮</div>
        <hr />
        <div class="blueColor" style="padding: 20px 80px">闪电发货</div>
        <hr />
        <div class="blueColor" style="padding: 20px 80px">权威荣誉</div>
      </div>
      <hr />
      <div style="display: flex; justify-content: space-around; font-size: 18px">
        <div style="padding: 10px 10px">
          <div class="greyColor">新手上路</div>
          <div class="greyColor2">
            <a href="#">购物流程</a><br />
            <a href="https://h5.mimijishi.com/subpages/auth/reg-rule?type=member_register"
              >用户注册协议</a
            ><br />
            <a href="https://h5.mimijishi.com/subpages/auth/reg-rule?type=privacy">用户隐私协议</a>
          </div>
        </div>
        <div style="padding: 10px 10px">
          <div class="greyColor">配送与支付</div>
          <div class="greyColor2">
            <a href="#">货到付款区域</a><br />
            <a href="#">配送支付智能查询</a><br />
            <a href="#">支付方式说明</a>
          </div>
        </div>
        <div style="padding: 10px 10px">
          <div class="greyColor">会员中心</div>
          <div class="greyColor2">
            <a href="/member/point">资金管理</a><br />
            <a href="/member/collector">我的收藏</a><br />
            <a href="/member/trade">我的订单</a>
          </div>
        </div>
        <div style="padding: 10px 10px">
          <div class="greyColor">服务保证</div>
          <div class="greyColor2">
            <a href="#">退换货原则</a><br />
            <a href="#">售后服务保证</a>
          </div>
        </div>
        <div style="padding: 10px 10px">
          <div class="greyColor">联系我们</div>
          <div class="greyColor2">
            <a href="#">网站故障报告</a><br />
            <a href="#">投诉与建议</a>
          </div>
        </div>
        <div style="padding: 10px 10px">
          <div class="greyColor">
            服务热线<br />
            <span style="color: #3d87db">19973123627</span>
          </div>
          <div>
            <span style="color: #8c8c8d; font-size: 12px">客服服务时间9:00-21:00 周一至周日</span>
          </div>
        </div>
      </div>
      <div class="my-foot">
        @2023 长沙米米集市科技有限公司 版权所有<br /><br />长沙米米集市科技有限公司
        <a style="color: #a9a9a9" href="https://beian.miit.gov.cn/#/Integrated/index"
          >备案号:湘ICP备2023028328号-1
        </a>
      </div>
    </div>

    <!-- 挂件 -->
    <component
      mode="render"
      v-for="(wgt, index) in wgts"
      :is="wgt.type"
      :value="wgt"
      :page-props="pageConfig"
      :key="`wgt-${index}`"
    ></component>
  </div>
</template>

<style scoped>
.sp-footer hr {
  color: #d6d6d6;
  border: 0.5px solid;
}
.blueColor {
  color: #4996de;
}
.greyColor {
  color: #796f63;
}
.greyColor2 a {
  color: #8c8c8d;
  font-size: 12px;
}
</style>

<script>
import { mapState } from 'vuex'
export default {
  name: 'SpFooter',
  data() {
    return {
      index: 0
    }
  },

  computed: {
    ...mapState({
      wgts: (state) => {
        const res = state.footerTemplate
        return res ? JSON.parse(res.params) : []
      },
      pageConfig: (state) => {
        return state.pageConfig
      }
    })
  },

  methods: {
    toggleMenu(m) {}
  }
}
</script>
